<template>
  <div class="contonter">
    <Header @userTask="userTask" />
    <List
      @delToDoListItemById="delToDoListItemById"
      @changeCheckedToDoItem="changeCheckedToDoItem"
    />
    <Footer
      @delAllDoneTask="delAllDoneTask"
      @checkedAllToDoList="checkedAllToDoList"
    />
  </div>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import Header from '@/components/header/index.vue'
import List from '@/components/list/index.vue'
import Footer from '@/components/footer/index.vue'
import { todo } from './types/index'

let userTaskItem = ref<any>([])

/* 添加任务 */
function userTask(userTask: any) {
  const todo: todo = {
    id: userTaskItem.value.length + 1,
    value: userTask.value,
    done: false,
  }
  userTaskItem.value.unshift(todo)
}

/* 删除当前任务 */
function delToDoListItemById(id: number) {
  userTaskItem.value = userTaskItem.value.filter((v: any) => v.id !== id)
}

/* 改变当前任务选中状态 */
function changeCheckedToDoItem(id: number) {
  userTaskItem.value.forEach((v: any) => {
    if (v.id === id) {
      v.done = !v.done
    }
  })
}

/* 清除所有已完成的任务 */
function delAllDoneTask() {
  userTaskItem.value = userTaskItem.value.filter((v: any) => v.done === false)
}

/* 全选 */
function checkedAllToDoList(done: boolean) {
  userTaskItem.value.filter((v: any) => (v.done = done))
}

provide('userTaskItem', userTaskItem)
</script>

<style scoped>
.contonter {
  overflow: hidden;
  width: 1200px;
  margin: 10px auto;
  border: 2px solid #e2e2e2;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 20px;
}
</style>